<template>
  <div class="statics-gather">
    <div class="statics-title">
      <div class="select-box">
        <div class="select_li mini">
          <el-select v-model="yearData" placeholder="请选择" size="small" @change="selectFun('year')" value-key="year">
            <el-option v-for="item in yearOptions" :key="item.year" :label="item.year + '年'" :value="item"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <el-select v-model="monthData" placeholder="请选择" size="small" @change="selectFun">
            <el-option
              v-for="item in monthOptions"
              :key="item.month"
              :label="item.month ? item.month + '月' : '全部'"
              :value="item.month"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <div>类型：</div>
          <el-select
            v-model="holidayData"
            placeholder="请选择"
            size="small"
            @change="selectFun('holiday')"
            value-key="typeName">
            <el-option
              v-for="item in holidayOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="item"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <el-select v-model="leaveData" placeholder="请选择" size="small" @change="selectFun">
            <el-option
              v-for="item in leaveOptions"
              :key="item.leaveId"
              :label="item.leaveName"
              :value="item.leaveId"></el-option>
          </el-select>
        </div>
        <div class="select_li mini">
          <div>销假：</div>
          <el-select v-model="backType" placeholder="请选择" size="small" @change="selectFun('back')">
            <el-option
              v-for="item in backTypeOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"></el-option>
          </el-select>
        </div>
      </div>
      <div class="select-box">
        <el-cascader
          placeholder="请选择部门/人员进行查询"
          :options="orgOptions"
          :props="propsCascader"
          v-model="orgPerson"
          @change="handleChange"
          size="small"
          :show-all-levels="true"
          ref="cascader"
          clearable
          filterable
          :default-expanded-keys="defaultShowKeys"></el-cascader>
        <el-button type="primary" size="small" @click="exportData">导 出</el-button>
        <el-button type="primary" size="small" @click="remind('0')" v-if="showType === '6'">一键提醒</el-button>
      </div>
    </div>
    <div class="statics-gather-main">
      <gather-table
        ref="right2"
        :showType="showType"
        :showAll="showAll"
        @remind="remind"
        @initData="initData"></gather-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import GatherTable from './staticsAttendance/GatherTable'
import {
  getDataPermissions,
  getSearchTimeList,
  getTypeList,
  exportOrgExcel,
  noticeCancelLeave,
  noticeAllCancelLeave,
} from '@apis/api-attendance.js'
moment.locale('zh-cn')
export default {
  components: {
    GatherTable,
  },
  props: {
    typeFrom: String,
    orgId: String,
    showAll: {
      type: String,
      default: '',
    },
    showType: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      tabID: '0',
      orgOptions: [],
      orgPerson: [],
      propsCascader: {
        // lazy: true,
        // expandTrigger: 'hover',
        checkStrictly: true,
        label: 'text',
        value: 'id',
        multiple: false,
      },
      moment: moment,
      param2: {
        userId: '',
        orgId: '',
        type: '1',
      },
      yearOptions: [],
      yearData: {},
      monthOptions: [],
      monthData: '',
      holidayOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
      ],
      holidayData: {},
      leaveOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
      ],
      leaveData: '',
      backTypeOptions: [
        {
          typeName: '全部',
          typeId: '',
        },
        {
          typeName: '已销假',
          typeId: '1',
        },
        {
          typeName: '未销假',
          typeId: '0',
        },
      ],
      backType: '',
      defaultShowKeys: [],
    }
  },
  created() {},
  mounted() {
    this.getTypeList()
    this.getDataPermissions()
    this.getSearchTimeList()
  },
  methods: {
    initData() {
      if (!this.yearData.year || !this.holidayData.typeId) return
      const month1 = this.monthData ? this.monthData : '01'
      const timeS = this.yearData.year + '-' + month1
      const month2 = this.monthData ? this.monthData : '12'
      const timeE = this.yearData.year + '-' + month2
      const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
      const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
      this.$refs.right2.getOrgLeaveStatistics(
        startTime,
        endTime,
        this.holidayData.typeId,
        this.leaveData,
        this.param2.orgId,
        this.param2.userId,
        this.backType
      )
    },

    handleChange(node) {
      // let checkNodes = this.$refs.cascader.getCheckedNodes()
      if (node && node.length === 1) {
        this.param2.orgId = node[0]
        this.param2.userId = ''
      } else if (node && node.length === 2) {
        this.param2.orgId = node[0]
        this.param2.userId = node[1]
      } else if (node && node.length === 3) {
        this.param2.orgId = node[1]
        this.param2.userId = node[2]
      } else {
        this.param2.userId = ''
        this.param2.orgId = ''
      }
      this.initData()
    },
    getSearchTimeList() {
      getSearchTimeList().then(res => {
        if (res.status === 200) {
          this.yearOptions = res.data
          const arr = res.data.filter(item => {
            return item.isChoose
          })
          this.yearData = arr[0]
          this.monthOptions = [{ month: '' }, ...res.data[0].monthList]
          this.initData()
        }
      })
    },
    getTypeList() {
      getTypeList().then(res => {
        if (res.status === 200 && res.data.length) {
          this.holidayOptions = res.data
          this.holidayData = res.data[0]
          this.leaveOptions = res.data[0].children
          this.initData()
        }
      })
    },
    getDataPermissions() {
      getDataPermissions({
        type: this.showType === '6' ? 'ATTEN_GATHER' : '1',
      }).then(res => {
        if (res.status === 200) {
          const arr = []
          res.data.forEach(item => {
            const arr1 = []
            item.userList.forEach(li => {
              arr1.push({
                text: li.userName,
                id: li.userId,
              })
            })
            arr.push({
              text: item.orgName,
              id: item.orgId,
              children: arr1,
            })
          })
          this.orgOptions = arr
        }
      })
    },
    selectFun(type) {
      if (type === 'holiday') {
        this.leaveOptions = this.holidayData.children
        this.leaveData = ''
      }
      if (type === 'year') {
        this.monthOptions = [{ month: '' }, ...this.yearData.monthList]

        this.monthData = this.yearData.monthList[0].month
      }
      this.initData()
    },
    exportData() {
      const month1 = this.monthData ? this.monthData : '01'
      const timeS = this.yearData.year + '-' + month1
      const month2 = this.monthData ? this.monthData : '12'
      const timeE = this.yearData.year + '-' + month2
      const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
      const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
      const req = `?startTime=${startTime}&endTime=${endTime}&loginUserId=${localStorage.pskh_userId}&orgId=${this.param2.orgId}&type=${this.holidayData.typeId}&userId=${this.param2.userId}&leaveId=${this.leaveData}`
      const link = document.createElement('a')
      link.href = exportOrgExcel(req)
      console.log(link.href)
      link.target = 'targetName'
      link.click()
    },
    remind(info) {
      if (info === '0') {
        const month1 = this.monthData ? this.monthData : '01'
        const timeS = this.yearData.year + '-' + month1
        const month2 = this.monthData ? this.monthData : '12'
        const timeE = this.yearData.year + '-' + month2
        const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
        const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
        noticeAllCancelLeave({
          attendanceDate: '',
          endTime: endTime,
          isLeaveCancel: this.backType,
          leaveId: this.leaveData,
          loginUserId: localStorage.pskh_userId,
          orgId: this.param2.orgId,
          startTime: startTime,
          type: this.holidayData.typeId,
          userId: this.param2.userId,
        }).then(res => {
          if (res.status === 200) {
            if (res.message === '操作成功') {
              this.$message.success('提醒成功')
            } else {
              this.$message.info('暂无可提醒表单')
            }

            this.initData()
          }
        })
      } else {
        noticeCancelLeave({
          id: info.dailyId,
        }).then(res => {
          if (res.status === 200) {
            this.$message.success('提醒成功')
            this.initData()
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.statics-gather {
  height: 100%;
  font-size: 14px;
  width: 100%;

  .statics-title {
    height: 56px;
    // box-shadow: inset 0px -2px 9px 0px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 20px;
    font-size: 16px;
    .select-box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        &.mini {
          .el-select {
            width: 100px;
          }
        }
      }
      .el-button {
        margin-left: 20px;
      }
    }
  }

  .statics-work-tips {
    color: #999999;
  }

  .statics-gather-main {
    height: calc(100% - 56px);
    background-color: #fff;
  }
}
</style>
